<template>
  <!-- 在 form 上一次性把字号、行高、输入框高度、圆角、边距等全用原子类写完 -->
  <el-form
    ref="formRef"
    :model="formData"
    label-width="120px"
    :rules="rules"
    class="w-full"
    size="large"
    uno-text-18
    uno-leading-48px
    uno-gap-y-16px
    uno-rounded-6px
    uno-border-none
  >
    <!-- 按 row_id 分组渲染 -->
    <el-row
      v-for="(row, rid) in rowFields"
      :key="rid"
      :gutter="20"
    >
      <el-col
        v-for="item in row"
        :key="item.field"
        :span="item.col_span ?? 24"
      >
        <el-form-item
          :label="item.label"
          :prop="item.field"
          :rules="item.rules"
          class="uno-text-18"           
        >
          <!-- text -->
          <el-input
            v-if="item.input_type === 'text'"
            v-model="formData[item.field]"
            :disabled="item.read_only"
            :placeholder="`请输入${item.label}`"
            class="uno-h-48px uno-text-18"    
          />
          <!-- select -->
          <el-select
            v-else-if="item.input_type === 'select'"
            v-model="formData[item.field]"
            :disabled="item.read_only"
            placeholder="请选择"
            popper-class="rounded-md bg-amber-50/70"
            class="uno-h-48px uno-text-18"
          >
            <el-option
              v-for="opt in item.options"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
              :disabled="opt.disabled"
            />
          </el-select>
          <!-- date -->
          <el-date-picker
            v-else-if="item.input_type === 'date'"
            v-model="formData[item.field]"
            :disabled="item.read_only"
            type="date"
            placeholder="选择日期"            
            class="uno-h-48px uno-text-18"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            @change="formatDate(item.field, $event)"
          />
          <!-- number -->
          <el-input
            v-else-if="item.input_type === 'number'"
            v-model.number="formData[item.field]"
            :disabled="item.read_only"
            type="number"
            :placeholder="`请输入${item.label}`"
            class="uno-h-48px uno-text-18"
          />
          <!-- switch -->
          <el-switch
            v-else-if="item.input_type === 'switch'"
            v-model="formData[item.field]"
            :disabled="item.read_only"
            :active-value="true"
            :inactive-value="false"
          />
          <!-- textarea -->
          <el-input
            v-if="item.input_type === 'textarea'"
            v-model="formData[item.field]"
            type="textarea"
            :rows="item.rows_num ?? 2"
            :disabled="item.read_only"
            :placeholder="`请输入${item.label}`"
            class="uno-text-18"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
/* ---------- 以下脚本完全不变 ---------- */
import { ref, computed, watch, PropType } from 'vue'
import type { FormInstance } from 'element-plus'
import type { Field } from '@/types'


const props = defineProps({
  fields: { type: Array as PropType<Field[]>, required: true },
  data: { type: Object, default: () => ({}) }
})

const emit = defineEmits(['update:data'])
const formRef = ref<FormInstance | null>(null)
// const formData = ref({ ...props.data })
const formData = computed({
  get: () => props.data,
  set: val => emit('update:data', val)   // ★ 关键
})

watch(() => props.data, d => (formData.value = { ...d }), { deep: true })
//watch(formData, d => emit('update:data', d), { deep: true })
watch(formData, () => {
  emit('update:data', JSON.parse(JSON.stringify(formData.value)))
}, { deep: true })

const rowFields = computed(() =>
  props.fields
    .filter(f => !f.hide)
    .reduce((map, f) => {
      const rid = f.row_id ?? 1
      map[rid] ||= []
      map[rid].push(f)
      return map
    }, {} as Record<number, Field[]>)
)

const rules = computed(() =>
  props.fields.reduce((acc, f) => {
    acc[f.field] = []
    if (!f.is_null) acc[f.field].push({ required: true, message: `${f.label}不能为空`, trigger: 'blur' })
    if (f.Validation) acc[f.field].push(f.Validation)
    return acc
  }, {} as Record<string, any>)
)

const formatDate = (field: string, date: Date) => {
  formData.value[field] = date
    ? `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    : ''
}
</script>

<!-- 不再需要 scoped 样式，所有视觉效果都用原子类控制 -->
<style scoped></style>
